<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test13</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<h1 style="text-align: center">HTML复习历程-13</h1>
<div id="app">
    <div>
        <p>v-if、v-else-if、v-else</p>
        <br>
        <div>
            高<input type="radio" checked name="r_index" v-on:click="radioIndex('0')">
            中<input type="radio" name="r_index" v-on:click="radioIndex('1')">
            低<input type="radio" name="r_index" v-on:click="radioIndex('2')">
        </div>
        <p>{{index}}</p>
        <div>
            <p v-if="index=='0'">高级</p>
            <p v-else-if="index=='1'">中级</p>
            <p v-else>低级</p>
        </div>
        <input type="checkbox" name="是否显示" v-model="isShow">
        <p v-show="isShow">true</p>
    </div>
    <br>
    <div>
        <p>v-for</p>
        <ol>
            <li v-for="mem in members">
                {{mem.name+'；'+mem.age}}
            </li>
        </ol>
        <br>
        <ul>
            <li v-for="(value,key,index) in link">
                {{index}};{{key}};{{value}}
            </li>
        </ul>
    </div>
    <br>
    <div>
        <p>计算属性computed,属性的getter</p>
        <p>msg:{{msg}}</p>
        <p>reverMsg:{{reverMsg}}</p>
        <p>【注】computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。</p>
        <p>可以说使用 computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性。</p>
    </div>
</div>
<script type="text/javascript">
    new Vue({
        el:"#app",
        data:{
            index:"0",
            isShow:true,
            members:[
                {name:"baidu", age:10},
                {name:"alibaba", age:11},
                {name:"tencent", age:12},
            ],
            link:{
                id:"26956",
                title:"百度链接",
                url:"www.baidu.com"
            },
            msg:"abcde"
        },
        methods:{
            radioIndex(tag){
                this.index = tag
            }
        },
        computed:{
            //计算属性的getter
            reverMsg:function () {
                return this.msg.split('').reverse().join('')
            }
        }
    })
</script>
</body>
</html>
